<template>
  <div class="content">
    <Dropdown :trigger="['click']" :disabled="clickDisable">
        <Button class="menu-item"  type="text">
          <p>
              <span>
                <IconSendToBack class="btn-icon" />
              </span>
              <span>
                <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
              </span>
          </p>
          <p class="add_label">排列</p>  
      </Button>
      <template #overlay>
            <Menu class="world-space">
                <MenuItem>
                    <Button  size="small" type="text" @click="orderElement(handleElement!, ElementOrderCommands.UP)"><i class="iconfont icon-shangyiyiceng1 right-label"/>上移一层</Button>
                </MenuItem>
                <MenuItem  >
                    <Button  size="small" type="text" @click="orderElement(handleElement!, ElementOrderCommands.TOP)" ><i class="iconfont icon-zhiding right-label"/>置顶</Button>
                </MenuItem>
                <MenuItem  >
                    <Button  size="small" type="text" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)" ><i class="iconfont icon-xiayiyiceng1 right-label"/>下移一层</Button>
                </MenuItem>
                <MenuItem  >
                    <Button  size="small" type="text" @click="orderElement(handleElement!, ElementOrderCommands.BOTTOM)" ><i class="iconfont icon-zhidi right-label"/>置底</Button>
                </MenuItem>
                <MenuItem >
                    <SubMenu>
                        <Dropdown   placement="topRight">
                            <Button  size="small" type="text" ><IconAlignLeft class="right-label" />对齐</Button>
                            <template #overlay>
                                <Menu >
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="alignElementToCanvas(ElementAlignCommands.LEFT)" ><IconAlignLeft class="right-label" />左对齐</Button>
                                  </MenuItem>
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="alignElementToCanvas(ElementAlignCommands.HORIZONTAL)"><IconAlignVertically class="right-label" />水平居中</Button>
                                  </MenuItem>
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="alignElementToCanvas(ElementAlignCommands.RIGHT)"><IconAlignRight class="right-label" />右对齐</Button>
                                  </MenuItem>
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="alignElementToCanvas(ElementAlignCommands.TOP)"><IconAlignTop class="right-label" />上对齐</Button>
                                  </MenuItem>
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="alignElementToCanvas(ElementAlignCommands.VERTICAL)"><IconAlignHorizontally class="right-label" />垂直居中</Button>
                                  </MenuItem>
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="alignElementToCanvas(ElementAlignCommands.BOTTOM)"><IconAlignBottom class="right-label" />下对齐</Button>
                                  </MenuItem>
                                </Menu>
                            </template>
                        </Dropdown>
                    </SubMenu>
                </MenuItem>
                <MenuItem >
                    <SubMenu>
                        <Dropdown   placement="topRight">
                            <Button  size="small" type="text" ><i class="iconfont icon-zuoyoufanzhuan right-label"/>旋转</Button>
                            <template #overlay>
                                <Menu >
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="updateRotate45('Le')" >  <i class="iconfont icon-zuoyoufanzhuan right-label"/>水平旋转</Button> 
                                  </MenuItem>
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="updateRotate45('V')" ><i class="iconfont icon-shangxiafanzhuan right-label"/>垂直旋转</Button>
                                  </MenuItem>
                                  <MenuItem >
                                      <Button  size="small" type="text"  @click="updateRotate45('R')"><IconRotate class="right-label" />向右旋转90°</Button>
                                  </MenuItem>
                                 <MenuItem >
                                      <Button  size="small" type="text"  @click="updateRotate45('L')"><IconRotate class="right-label"  :style="{transform: 'rotateY(180deg)',}" />向左旋转90°</Button>
                                  </MenuItem>
                                 <MenuItem class="hor-le">
                                     
                                 </MenuItem>
                                  <MenuItem >
                                    <Button  size="small" type="text" @click="handleShow">自定义旋转</Button>
                                  </MenuItem>
                                </Menu>
                            </template>
                        </Dropdown>
                    </SubMenu>
                </MenuItem>
            </Menu>
        </template>
    </Dropdown> 
    <mask-form :showRate="showRate" :infoObject="formitem" @close="showRate=false" @Comfirm="handleConfirm"></mask-form>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { round } from 'lodash'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { ElementAlignCommands, ElementOrderCommands } from '@/types/edit'
import { MIN_SIZE } from '@/configs/element'
import MaskForm from '@/components/MakForm.vue'
import { SHAPE_PATH_FORMULAS } from '@/configs/shapes'
import useOrderElement from '@/hooks/useOrderElement'
import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(useMainStore())
const minSize = computed(() => {
  if (!handleElement.value) return 20
  return MIN_SIZE[handleElement.value.type] || 20
})
const left = ref(0)
const top = ref(0)
const width = ref(0)
const height = ref(0)
const rotate = ref(0)
const fixedRatio = ref(false)
const showRate = ref(false)
const formRoute = ref(0)
const hasRoute = ref(0)
const clickDisable = ref(false)
const formitem = {
  title: '自定义旋转',
  itemLabel: '角度',
  formtype: 'route'
}
watch(handleElement, () => {
  if (!handleElement.value) {
    clickDisable.value = true
    return 
  }
  clickDisable.value = false
  left.value = round(handleElement.value.left, 1)
  top.value = round(handleElement.value.top, 1)

  fixedRatio.value = 'fixedRatio' in handleElement.value && !!handleElement.value.fixedRatio

  if (handleElement.value.type !== 'line') {
    width.value = round(handleElement.value.width, 1)
    height.value = round(handleElement.value.height, 1)
    rotate.value = 'rotate' in handleElement.value && handleElement.value.rotate !== undefined ? round(handleElement.value.rotate, 1) : 0
  }
}, { deep: true, immediate: true })
const { orderElement } = useOrderElement()
const { alignElementToCanvas } = useAlignElementToCanvas()
const { addHistorySnapshot } = useHistorySnapshot()

// 设置元素位置
const updateLeft = (value: number) => {
  const props = { left: value }
  slidesStore.updateElement({ id: handleElementId.value, props })
  addHistorySnapshot()
}
const updateTop = (value: number) => {
  const props = { top: value }
  slidesStore.updateElement({ id: handleElementId.value, props })
  addHistorySnapshot()
}
const handleShow = () => {
  showRate.value = true
  hasRoute.value = 0
}
const handleConfirm = (value:any) => {
  showRate.value = false
  hasRoute.value = value
  updateRotate45('Z')
}
// 将元素旋转45度（顺时针或逆时针）
const updateRotate45 = (command: '+' | '-' | 'Le' | 'V' | 'R' | 'L' | 'Z') => {
  let _rotate = Math.floor(rotate.value / 45) * 45
  if (command === '+') _rotate = _rotate + 45
  else if (command === '-') _rotate = _rotate - 45
  else if (command === 'Le') _rotate = _rotate + 180
  else if (command === 'V') _rotate = _rotate + 90
  else if (command === 'L') _rotate = _rotate - 90
  else if (command === 'R') _rotate = _rotate + 90
  else if (command === 'Z') {
    _rotate = hasRoute.value
    // if (formRoute.value > 0) {
    //   _rotate = _rotate + hasRoute.value
    // }
    // else {
    //   _rotate = _rotate - hasRoute.value
    // }
  }
  // if (_rotate < -180) _rotate = -180
  // if (_rotate > 180) _rotate = 180

  const props = { rotate: _rotate }
  slidesStore.updateElement({ id: handleElementId.value, props })
  addHistorySnapshot()
}
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  .menu-item {
    width: 60px;
    text-align: center;
    display: flex;
    cursor: pointer;
    justify-content: center;
    flex-direction: column;
    .add_label {
      margin-top: 3px;
    }
    .down-size {
      font-size: 10px;
      margin-left: 1px;
    }
  }
  .btn-confirm {
    background: #3d7eff !important;
  }
}
</style>
<style>
.hor-le {
  width: 100%;
  height: 1px;
  margin: 5px 0;
  padding: 0;
  background-color: #c3c3c3 !important;
}
.right-label {
  margin-right: 10px !important;
}
</style>